<template>
  <div id="GoodsSituation">
    <el-card class="card">
      <el-row>
        <el-col :span="24">
          <ul class="titlelist">
            <li>
              <router-link to="/HeadTop/GoodsSituation/GoodsSummary" class="destyle" active-class="active">商品概况
              </router-link>
            </li>
            <li>
              <router-link to="/HeadTop/GoodsSituation/AddGoods" class="destyle" active-class="active">添加商品
              </router-link>
            </li>
            <li>
              <router-link to="/HeadTop/GoodsSituation/GoodsList" class="destyle" active-class="active"> 商品列表
              </router-link>
            </li>
          </ul>
        </el-col>
      </el-row>
      <router-view></router-view>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'GoodsSituation',
  data () {
    return {}
  }
}
</script>
<style lang="less" scoped>
#GoodsSituation{
  padding: 15px;
  .card{
    width: 100% !important;
    margin: 0 !important;
  }
}
.active {
  background-color: #fff !important;
  color: black !important;
}

@media screen and (max-width: 600px) {
  .el-row {
    display: none;
  }
}

.destyle {
  color: #fff;
  text-decoration: none;
  display: block;
}

.el-card {
  margin-top: 10px;
  width: 97%;
  margin-left: 10px;
  border: 0px;

  .el-row {
    background: #FFBD6C;
    height: 35px;
    width: 104%;
    margin: -20px 0 0 -20px;

    .titlelist {
      margin-left: 20px;
      display: flex;
      justify-content: left;
      list-style: none;

      li {
        width: 100px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        color: #fff;
      }
    }
  }
}
</style>
